<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '购物车',
  },
}
</route>

<template>
  <view class="p-4">
    <text class="text-2xl font-medium">购物车</text>
    <view class="flex flex-col !bg-transparent">
      <wd-card
        v-for="item of currentCartList"
        :key="item.id"
        custom-title-class="!p-0"
        custom-footer-class="!p-0"
        class="!m-0 !my-2"
      >
        <view class="flex items-center h-25">
          <wd-checkbox shape="square" v-model="item.isSelected"></wd-checkbox>
          <navigator url="/pages/goods-details/goods-details">
            <wd-img class="flex-shrink-0" :width="90" :height="90" :src="item.img" />
          </navigator>
          <view class="flex flex-col flex-1">
            <navigator url="/pages/goods-details/goods-details">
              <text class="line-clamp-2 text-md text-black font-semibold">
                {{ item.name }}
              </text>
              <text>{{ item.spec }}</text>
            </navigator>
            <view class="flex justify-between text-rose-5 font-bold">
              <text>￥{{ item.price }}</text>
              <wd-input-number v-model="item.count" />
            </view>
          </view>
        </view>
      </wd-card>
    </view>
    <!-- 猜你喜欢 -->
    <view class="mt-4 mb-2">猜你喜欢</view>
    <view class="grid grid-cols-[repeat(2,_minmax(240rpx,_1fr))] gap-4">
      <goods-card v-for="good in goods" :key="good.id" :goods="good" />
    </view>

    <!-- 底部功能 -->
    <view class="flex justify-between bg-white p-2 fixed bottom-[--window-bottom] left-0 right-0">
      <view class="flex items-center">
        <wd-checkbox shape="square" v-model="selectAll" @change="onSelectAll" />
        <text>全选</text>
      </view>
      <view class="flex gap-2 items-center">
        <view>
          <text class="text-xs">合计：</text>
          <text class="!color-rose-5 font-bold">￥{{ totalPrices }}</text>
        </view>
        <wd-button custom-class="!m-0 !min-w-24 !bg-rose-5">结算</wd-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import goodsCard from '@/components/goods-card.vue'
const currentCartList = ref<
  {
    id: number
    name: string
    spec: string
    img: string
    price: number
    count: number
    isSelected: boolean
  }[]
>([])
const getCurrentCartList = () => {
  currentCartList.value = [
    {
      id: 1,
      name: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
      spec: '珠光白，8+256G',
      img: '/static/images/product002.png',
      price: 100,
      count: 1,
      isSelected: false,
    },
    {
      id: 2,
      name: '【XXXXBook13】XX笔记本电脑 xxxxBook13',
      spec: '珠光白，16+512G',
      img: '/static/images/product002.png',
      price: 200,
      count: 1,
      isSelected: false,
    },
  ]
}
getCurrentCartList()

const selectAll = ref<boolean>(false)
function onSelectAll({ value }) {
  if (value) {
    currentCartList.value.forEach((item) => {
      item.isSelected = true
    })
  } else {
    currentCartList.value.forEach((item) => {
      item.isSelected = false
    })
  }
}
const totalPrices = computed(() => {
  return currentCartList.value
    .filter((item) => item.isSelected)
    .reduce((total, item) => total + item.price * item.count, 0)
})

watchEffect(() => {
  selectAll.value = currentCartList.value.every((item) => item.isSelected)
})

const goods = ref([
  {
    id: 1,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 1899,
    image: '/static/images/product001.png',
    tag: '赠送积分',
  },
  {
    id: 2,
    title: '【XXXXBook13】XX笔记本电脑 xxxxBook13',
    price: 5199,
    image: '/static/images/product002.png',
    tag: '新品',
  },
  {
    id: 3,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 1899,
    image: '/static/images/product003.png',
    tag: '新品',
  },
  {
    id: 4,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 3899,
    image: '/static/images/product004.png',
    tag: '新品',
  },
  {
    id: 5,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 2799,
    image: '/static/images/product005.png',
    tag: '新品',
  },
  {
    id: 6,
    title: '【XX20e】XX5000mAh 大电池6.3英寸高清大屏',
    price: 3588,
    image: '/static/images/product006.png',
    tag: '新品',
  },
])
</script>

<style lang="scss" scoped>
//
</style>
